<script setup>
  import { ref, nextTick } from 'vue'
  // 获取标签内容
  const model = defineModel()

  // 是否正在编辑
  const isEdit = ref(false)
  // input DOM
  const inputRef = ref(null)

  // 双击显示
  const onDblClick = () => {
    isEdit.value = true
    // 采用异步 nextTick 因为此时 input 还没有挂载 别忘了导入
    nextTick(() => {
      inputRef.value.focus()
    })
  }

  // 按赋值保存
  const onSave = (e) => {
    // 去除左右空格
    let tagName = e.target.value.trim()
    if (tagName) {
      // 赋值
      model.value = tagName
    }
    // 去除焦点
    isEdit.value = false
  }
</script>
<template>
  <div class="my-tag">
    <!-- 加载后要获取焦点有两种方法 ref / 自定义标签 -->
     <!-- 为什么不用 v-model 因为不需要实时修改 只要当按回车健后才修改 -->
    <input
      ref="inputRef"
      v-if="isEdit"
      class="input"
      :value="model"
      @blur="onSave"
      type="text"
      placeholder="输⼊标签"
      @keydown.enter="onSave"
    />
    <div
      @dblclick="onDblClick"
      class="text"
      v-else
    >
      {{ model }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
  .my-tag {
    cursor: pointer;

    .input {
      appearance: none;
      outline: none;
      border: 1px solid #ccc;
      width: 100px;
      height: 40px;
      box-sizing: border-box;
      padding: 10px;
      color: #666;

      &::placeholder {
        color: #666;
      }
    }
  }

</style>
